<template>
	<!-- 按日每天营业数据 -->
	<view :style="{paddingTop: !totalBusinessList.hasOwnProperty('total')?'30rpx':'0'}">
		

	<view class="business-content" v-for="(item,index) in dayBusinessList">
		<!-- 标题 -->
		<view class="business-title">
			<view style="height: 26rpx;width: 10rpx;background-color: var(--grey-text);;border-radius: 10rpx;">
			</view>
			<view class="business-title-date" style="color:var(--grey-text) ;font-weight: 600;">{{item.date}}</view>
		</view>
		<view class="business-content-bg">
			
			<!-- 销售额 -->
			<view class="business-content-display" @click="showTotalPopup('total',item.total,item.date)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-name">
							销售：
						</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{ formatAmount(item.total.totalMoney) || 0 }}
							</view>
							<view class="business-unit" v-if="item.total.totalMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">营业：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.total.totalMoneyList.businessMoney) || 0}}
							</view>
							<view class="business-unit" v-if="item.total.totalMoneyList.businessMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.total.totalMoneyList.businessMoneyNo) || 0}}
							</view>
							<view class="business-unit" v-if="item.total.totalMoneyList.businessMoneyNo>=10000">万</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 营业额 -->
			<view class="business-content-display" @click="showTotalPopup('business',item.business,item.date)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-name">营业：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(item.business.businessMoney) || 0}}
							</view>
							<view class="business-unit" v-if="item.business.businessMoney>=10000">万</view>
							<view class="business-unit" v-else>元</view>
							<view style="font-size: 24rpx;color: var(--grey-text);margin-left: 20rpx;">同比</view>
							<view class="business-field-money" style="margin-left: 10rpx;">
								{{formatAmount(item.business.businessMoneyList.businessMoneyBefore) || 0}}
							</view>
							<view class="business-unit"
								v-if="item.business.businessMoneyList.businessMoneyBefore>=10000">万</view>
							<view class="business-unit" v-else>元</view>
							<view style="margin-left: 10rpx;">
								<uni-icons
									:type="item.business.businessMoneyList.businessRate<0?'arrow-down':'arrow-up'"
									size="16"
									:color="item.business.businessMoneyList.businessRate<0?'#81B337':'#BD3124'">
								</uni-icons>
							</view>
							<view class="business-unit" style="font-size: 28rpx;"
								:style="{color:item.business.businessMoneyList.businessRate<0?'#81B337':'#BD3124'}">
								{{item.business.businessMoneyList.businessRate}}%
							</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">主营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.business.businessMoneyList.businessYesMoney) || 0}}
							</view>
							<view class="business-unit" v-if="item.business.businessMoneyList.businessYesMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.business.businessMoneyList.businessNoMoney) || 0}}
							</view>
							<view class="business-unit" v-if="item.business.businessMoneyList.businessNoMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 收款额 -->
			<view class="business-content-display" @click="showTotalPopup('receipts',item.receipts,item.date)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-name">收款：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(item.receipts.receiptsMoney)}}
							</view>
							<view class="business-unit" v-if="item.receipts.receiptsMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view>
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">消费：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.receipts.receiptsMoneyList.checkMoney)}}
							</view>
							<view class="business-unit" v-if="item.receipts.receiptsMoneyList.checkMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.receipts.receiptsMoneyList.chargeMoney)}}
							</view>
							<view class="business-unit" v-if="item.receipts.receiptsMoneyList.chargeMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">其他：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.receipts.receiptsMoneyList.otherMoney)}}
							</view>
							<view class="business-unit" v-if="item.receipts.receiptsMoneyList.otherMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>
			<!-- 会员统计 -->
			<view class="business-content-display" @click="showTotalPopup('member',item.member,item.date)">
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-name">会员统计：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money">
								{{formatAmount(item.member.memberMoney)}}
							</view>
							<view class="business-unit" v-if="item.member.memberMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<uni-icons type="right" size="14" :color="iconColorDetail"></uni-icons>
					</view>
				</view>
				<view class="business-content-title">
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">营业充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.member.memberMoneyList.chargeMoney)}}
							</view>
							<view class="business-unit" v-if="item.member.memberMoneyList.chargeMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view style="color: var(--grey-text);font-size: 26rpx;">非营充值：</view>
						<view style="display: flex;flex-direction: row;">
							<view class="business-field-money-sub">
								{{formatAmount(item.member.memberMoneyList.chargeNoMoney)}}
							</view>
							<view class="business-unit" v-if="item.member.memberMoneyList.chargeNoMoney>=10000">
								万
							</view>
							<view class="business-unit" v-else>元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line-split"></view>

			<!-- 未结算后结 -->
			<view class="business-content-display-room" style="margin-bottom: 0;">
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">未结：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{formatAmount(item.total.un_check_money) || 0}}
						</view>
						<view class="business-unit" v-if="item.total.un_check_money>=10000">
							万
						</view>
						<view class="business-unit" v-else>元</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">后结：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{formatAmount(item.total.after_check_money) || 0}}
						</view>
						<view class="business-unit" v-if="item.total.after_check_money>=10000">
							万
						</view>
						<view class="business-unit" v-else>元</view>
					</view>
				</view>
			</view>
			<!-- 开台数据 -->
			<view class="business-content-display-room">
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">开台数：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{item.openRoom.allRoom || 0}} / {{item.openRoom.openRate}}%
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view style="color: var(--grey-text);font-size: 26rpx;">桌均消：</view>
					<view style="display: flex;flex-direction: row;">
						<view class="business-field-money-sub">
							{{formatAmount(item.openRoom.avgRoomMoney) || 0}}
						</view>
						<view class="business-unit" v-if="item.openRoom.avgRoomMoney>=10000">
							万
						</view>
						<view class="business-unit" v-else>元</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "tradeChildDay",
		components: {

		},
		props: {
			dayBusinessList: {
				type: Array,
				required: true
			},
			totalBusinessList: {
				type: Object,
				required: true
			},
			betweenTime: {
				type: Array,
				required: false
			}
		},
		emits: ['business-open'],
		data() {
			return {
				iconColorDetail: 'var(--grey-text)',
				iconColor: 'var(--wihte-text)'
			}
		},
		mounted() {

		},
		methods: {
			formatAmount(amount) {
				if (amount >= 10000) {
					return (amount / 10000).toFixed(2);
				} else {
					// 格式化为千分位
					if (amount % 1 === 0) {
						return Number(amount).toString()
					} else {
						return Number(amount).toFixed(2)
					}

				}
			},
			showTotalPopup(type, item, date) {
				const _this = this
				switch (type) {
					case 'total':
						this.$emit('business-open', {
							item: item,
							type
						})
						// _this.$refs.total.opens(item)
						break
					case 'business':
						this.$emit('business-open', {
							item: item,
							date: _this.dateGetBetweenTime(date),
							type
						})
						// _this.$refs.business.opens(item, _this.dateGetBetweenTime(date))
						break
					case 'receipts':
						this.$emit('business-open', {
							item: item,
							type
						})
						// _this.$refs.receipts.opens(item)
						break
					case 'member':
						this.$emit('business-open', {
							item: item,
							date: _this.dateGetBetweenTime(date),
							type
						})
						// _this.$refs.member.opens(item, _this.dateGetBetweenTime(date))
						break
					default:
						uni.showToast({
							title: '未找到标识',
							icon: 'none',
							duration: 1500
						})
				}
			},
			dateGetBetweenTime(date) {
				let originalDate = date
				let dates = new Date(date)
				dates.setDate(dates.getDate() + 1)
				return [originalDate, dates.toISOString().split('T')[0]]
			}
		}
	}
</script>

<style scoped>
	.business-content-bg {
		display: flex;
		flex-direction: column;
		background-color: var(--bg-center-color);
		border-radius: 20rpx;
		color: var(--text-color);
		box-shadow: 0 2px 0 var(--shadow-color);
	}

	.business-unit {
		font-size: 24rpx;
		color: var(--grey-text);
		margin-left: 4rpx;
	}

	.business-content-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
		align-items: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.business-content-display {
		display: flex;
		flex-direction: column;
		padding: 0 38rpx 20rpx 38rpx;
	}

	.business-content-display-room {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
		align-items: center;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 38rpx;
		margin-bottom: 20rpx;
	}

	.business-title-date {
		margin-left: 10rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.business-title {
		height: 90rpx;
		background-color: var(--bg-color);
		width: 100%;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
	}

	.business-content {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
	}

	.business-field-name {
		color: var(--white-text);
		font-size: 28rpx;
	}

	.business-field-money {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--white-text);
	}

	.business-field-money-sub {
		font-size: 26rpx;
		font-weight: 600;
		color: var(--white-text);
	}

	.business-content-display:active {
		background: var(--bg-color)
	}
</style>